<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="js/jquery-3.4.1.min.js"></script>

    <img src="img/1.jpg" width="300"> 
    <img src="img/1.jpg" width="300"> 
    <img src="img/1.jpg" width="300">

    <script>
       /* 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：
            click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时
            mouseover( ) 触发或将函数绑定到指定元素的mouseover事件 鼠标移过时
            mouseout( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标移出时
        */
        $("img").click(function(){
             //点击一下，换照片
             $(this).attr("src","img/2.jpg"); //this就是事件触发的源头
        });

        $("img").mouseover(function(){ //移动到元素上时
             $(this).css("border","2px solid red");
        });

        $("img").mouseout(function(){ //离开元素时
             $(this).css("border","2px solid white");
        });

    </script>
</body>
</html>